<template>
  <el-dialog :visible.sync="visible" :close-on-click-modal="false" :title="$tt('label_container_stock')" custom-class="dialog_big">


    <el-form :label-width="$globalCss.formLabelWidth_default" label-position="right">

      <el-form-item :label="$tt('label_warehouse_location')">
          <el-input v-model="locationCode" @input="inputRefresh"></el-input>
      </el-form-item>
      <el-form-item :label="$tt('label_container')">
          <el-input v-model="containerCode" @input="inputRefresh"></el-input>
      </el-form-item>
      <el-form-item :label="$tt('label_sub_container')">
          <el-input v-model="subContainerCode" @input="inputRefresh"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <ex_super_table ref="MainTable" :model="tableModel" :url="tableUrl" :urlParams="tableParamsFun" :autoPage="true"
          :autoLoad="true" max-height="500" @selection-change="e => selection = e" />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="selectFinish">{{ $tt('label_submit') }}</el-button>
    </span>

  </el-dialog>
</template>

<script>

export default {
  name: 'stockContainerQuery_wms',
  data() {
    return {
      visible: false,


      locationCode: "",
      containerCode: "",
      subContainerCode: "",
      havingUsableQty: 'Y',
      selection: [],

      tableUrl: '/wms-api/client/StockSkuQueryClientRpc/stockContainerQuery.json',
      tableModel: [
        { type: 'selection', clickToggle: true, },
        { key: 'customerName', label: 'label_customer','min-width': 120, 'show-overflow-tooltip': true,  },
        { key: 'skuBarcode', label: 'label_sku_code','min-width': 120, 'show-overflow-tooltip': true,  },
        { key: 'skuName', label: 'label_sku_name','min-width': 100, 'show-overflow-tooltip': true,  },

        { key: 'usableQty', label: 'label_usable_count' ,'min-width': 100, 'show-overflow-tooltip': true, },
        { key: 'locationCode', label: 'label_warehouse_location' ,'min-width': 100, 'show-overflow-tooltip': true, },
        { key: 'containerCode', label: 'label_container' ,'min-width': 100, 'show-overflow-tooltip': true, },
        { key: 'subContainerCode', label: 'label_sub_container' ,'min-width': 100, 'show-overflow-tooltip': true, },
      ],
    }
  },
  props: {


  },

  computed: {

  },
  methods: {
    inputRefresh: _.debounce(function (item) {
      this.$refs.MainTable.loadData()
    }, 1000),
    locationChange(e) {
      // console.log
    },
    tableParamsFun(loadParams) {
      const out = {}
      if (this.locationCode) out.locationCode = this.locationCode
      if (this.containerCode) out.containerCode = this.containerCode
      if (this.subContainerCode) out.subContainerCode = this.subContainerCode
       out.havingUsableQty = this.havingUsableQty
      return out
    },

    show(option) {

      this.visible = true

    },
    hide() {
      this.visible = false
    },

    selectFinish() {
      let select = this.selection;
      if (select.length == 0) {
        return this.$message.error(this.$tt("tip_please_tick"))
      }
      this.$emit('afterSubmit', select)
      this.visible = false
    },
  }
}
</script>
